<template>
	<view class="container">
		<page-header></page-header>
		<view class="video-container" v-if="(type=='solution'||type=='aboutus') && info.video">
			<video class="video" :poster="info.poster" :src="info.video" controls="{{true}}" autoplay="{{true}}"></video>	
		</view>
		<view class="video-container" v-if="type=='news' || type=='skill'">
			<image :src="info.thumb"></image>
		</view>
		<view class="share-block" v-if="type=='solution'">
			<view class="share-block-left">
				<view class="share-block-title">{{info.title}}</view>
				<view class="share-block-view">
					<image src="/static/img/ico-view.png"></image>
					浏览量:{{info.viewCnt}}
				</view>
			</view>
			<view class="share-block-right">
				 {{ info.detail }}
			</view>
		</view>
		<view class="content">
			<view class="content-header">
				<view class="content-header-tag"></view>
				<template v-if='type==aboutus'>
					关于我们
				</template>
				<template v-else>
						<template v-if="type=='solution'">方案</template>
						<template v-if="type=='news'">动态</template>
						<template v-if="type=='skill'">技术</template>详情
				</template>
				
			</view>
			<view class="content-body">
				<view v-html="info.content"></view>
			</view>
		</view>
		<view class="btn-back" @click="doback">
			<image src="../../static/img/btn-back.png"></image>
		</view>
	</view>
</template>

<script>
	import pageHeader from '@/components/header/header.vue'
	import api from '@/api/index.js'
	
	export default {
		components:{
			pageHeader
		},
		mounted() {
			
		},
		onLoad(options){
			console.log(options)
			this.type = options.type;
			this.id = options.id;
			this.getInfo();
			console.log('onload')
			setTimeout(()=>{
				this.getShare();
			}, 500)
		},
		onShow(){
			console.log(window.location.href);
			//统计数据
			api.getRequest('stat', {
				top:'detail',
				sub:this.type,
				argv:this.id
			});
		},
		data() {
			return {
				swiperCfg:{
					autoplay:true,
					intervalSelect:3000,
					circular:true,
				},
				info:{},
				type:{},
				id:0,
				src:'',
				content:" <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p> <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p> <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p><p>sd</p> <p>sd</p>"
			}
		},
		methods: {
			getInfo(){
				const that = this;
				if(this.id <=0 && this.type!='aboutus') return;
				api.getRequest('detail', {
					type:that.type,
					id:that.id
				}).then((res)=>{
					let response = res.data;
					console.log(response);
					that.info = response;
					uni.setStorageSync('contact', that.info.phone_zx)
				})
			},
			doShare(){
				
			},
			doback(){
				uni.navigateBack();
			},
			getShare(){
				 const that = this;	
				 let uuid = "";
				 if(this.$route.query.uuid) {
				 	uuid = this.$route.query.uuid;
				 	uni.setStorageSync('uuid', uuid)
				 }
				 else {
				 	uuid = uni.getStorageSync('uuid');
				 }
				 api.getRequest('shareData', {
				 	uuid:uuid,
					url:window.location.href
				 }).then((res)=>{
					 let response = res.data;
					 console.log('set setting', response);
					 
					 that.setShare(response.setting);
				 });
			},
			setShare(setting){
				let link = setting.shareLink;
				// if(uuid) link+='&uuid='+uuid;
				window.jWeixin.updateAppMessageShareData({ 
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				
				window.jWeixin.updateAppMessageShareData({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareAppMessage({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
				window.jWeixin.onMenuShareTimeline({
					title: setting.shareTitle, // 分享标题
					desc: setting.shareDesc, // 分享描述
					link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					imgUrl: setting.shareImg, // 分享图标
				});
			}
		}
	}
</script>

<style scoped>
	.video-container{
		width: 100%;
		height: 388rpx;
		/* padding: 30rpx; */
		display: flex;
		justify-content: center;
		box-sizing: border-box;
	}
	.video{
		width: 100%;
		height: 100%;
	}
	 
	.video-container image{
		height: 100%;
		width: 100%;
	}
	.share-block{
		margin:15rpx 30rpx;
		background-color: #3c145f;
		border: 1rpx solid #442156;
		border-radius: 15rpx;
	/* 	display: flex;
		align-items: center;
		justify-content: space-between; */
		padding: 35rpx 25rpx;
	}
	.share-block-left{
			display: flex;
			align-items: center;
			justify-content: space-between;
	}
	.share-block-title{
		font-size: 33rpx;
		color: #fff;
		font-weight: bold;
		letter-spacing: .1em;
	}
	.share-block-view{
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 22rpx;
		margin-top: 20rpx;
	}
	.share-block-view image{
		height: 18rpx;
		width: 32rpx;
		margin-right: 8rpx;
	}
	.share-block-right {
		color: #c8c8c9;
		font-size: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 10rpx;
	}
	.share-block-right span{
		margin-top: 11rpx;
	}
	.share-block-right image{
		width: 44rpx;
		height: 42rpx;
	}
	
	.content{
		margin: 25rpx 30rpx;
	}
	.content-header{
		color: #fff;
		font-size: 27rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.content-header-tag{
		height: 27rpx;
		width: 10rpx;
		background-color: #9122bc;
		margin-right: 13rpx;;
	}
	
	.content-body{
		margin-top: 20rpx;
		background-color: #40145e;
		padding: 13rpx;
		border-radius: 20rpx;
		border: 1rpx solid #582c6d;
		min-height: 500rpx;
		margin-bottom: 200rpx;
		color: #fff;
		font-size: 25rpx;
		overflow: hidden;
		max-width: 100% !important;
	}
	.content-body img{
		max-width: 100% !important;
		height: auto;
	}
	
	.btn-back{
		position: fixed;
		bottom: 20rpx;
		right: 20rpx;
		height: 90rpx;
		width: 300rpx;
	}
		
	.btn-back image{
		height: 100%;
		width: 100%;
	}
	
</style>
<style>
	@import '@/static/css/common.css';
	 .content-body img{
	 	max-width: 100% !important;
		height: auto;
	 }
</style>

